<template>
  <div>
    <DynamicForm
      v-model="formData"
      :form-config="formConfig"
    >
      <template
        #input-prepend="{item,formData}"
      >
         <span class="test">
            模板插槽{{item.label}}
          </span>
      </template>
      <template
        #input2-prepend="{item,formData}"
      >
         <span class="test">
            模板插槽{{item.label}}
          </span>
      </template>
    </DynamicForm>
  </div>
</template>

<script>
import DynamicForm from '@localModules/ZhiXinLib/element-components/DynamicForm'
import {FormConfig} from "@localModules/ZhiXinLib/element-components/DynamicForm/ConfigType";
export default {
  name: "DynamicFormView",
  components:{
    DynamicForm
  },
  data(){
    return {
      formData:{
        input: '已经有值了'
      },
      input2ShowTitle: '显示提示，5秒过后不显示',
      formConfig:new FormConfig({},[
        {
          type:'select',
          label:'选择框',
          prop: 'select',
          setInitValue:()=> {
            return 'Beijing'
          },
          props: {
            options: [{
              value: 'Beijing',
              label: '北京'
            }, {
              value: 'Shanghai',
              label: '上海'
            }, {
              value: 'Nanjing',
              label: '南京'
            }, {
              value: 'Chengdu',
              label: '成都'
            }, {
              value: 'Shenzhen',
              label: '深圳'
            }, {
              value: 'Guangzhou',
              label: '广州'
            }],
          }
        },
        {
          type:'select',
          label:'选择框分组',
          prop: 'select2',
          setInitValue:()=> {
            return ['Beijing']
          },
          props: {
            multiple:true,
            group:true,
            options: [{
              label: '热门城市',
              children: [{
                value: 'Shanghai',
                label: '上海'
              }, {
                value: 'Beijing',
                label: '北京'
              }]
            }, {
              label: '城市名',
              children: [{
                value: 'Chengdu',
                label: '成都'
              }, {
                value: 'Shenzhen',
                label: '深圳'
              }, {
                value: 'Guangzhou',
                label: '广州'
              }, {
                value: 'Dalian',
                label: '大连'
              }]
            }],
          }
        },
        {
          type:'input',
          label:'输入框',
          prop: 'input',
          setInitValue:()=> {
            return '初始化这个input'
          }
        },
        {
          type:'input',
          label:'输入框2',
          prop: 'input2',
          setInitValue:()=> {
            return '初始化这个input2'
          },
          typeSlots:(h,item,formData)=>{
            return {
              append:()=>{
                return [
                  this.$createElement('div',['渲染函数插槽' + item.label])
                ]
              }
            }
          },
          props: {
            getShowTitle:()=>{
              setTimeout(()=>{
                this.input2ShowTitle = ''
              },5000)
              return this.input2ShowTitle
            }
          }
        },
      ])
    }
  }
}
</script>

<style scoped lang="scss">

</style>
